<template>
  <div id="app">
    <el-container>
      <el-aside width="16%">
        <Menu></Menu>
      </el-aside>
      <el-container>
        <router-view></router-view>
      </el-container>
    </el-container>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import Menu from "./views/menu.vue";
import Login from "./views/login.vue";
import { socket } from "./init";

@Component({
  components: { Menu }
})
export default class Main extends Vue {

  private loading: any;
  public $loading: any;

  constructor(...args: any) {
    super(...args);
    socket.socketEmitter.on("reconnect", () => {
      this.loading = this.$loading({
        lock: true,
        text: '断线重连中...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
    });

    socket.socketEmitter.on("reconnectEnd", () => {
      this.loading.close();
    });
  }
}
</script>

<style scoped>
#app {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.el-aside {
  background-color: #314053;
  text-align: center;
}

.el-container {
  height: 100%;
}
</style>
